<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
  <meta name="generator" content="HTML Tidy for Linux/x86 (vers 25 March 2009), see www.w3.org">
  <meta http-equiv="Content-Type" content="text/html; charset=us-ascii">
  <meta name="keywords" content="">
  <meta name="description" content="">
  <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
  <link rel="shortcut icon" type="image/png" href="favicon.png">

  <title>VCN Membership</title>
  <link href="css/layout.css" rel="stylesheet" type="text/css">
  <link href="css/jquery.jnotify.css" rel="stylesheet" type="text/css">
  <script src='lib/require-1.0.7.min.js' data-main='site.js' type="text/javascript">
</script>
</head>

<body>
  <div id='main'></div>

  <div class='page' id='login'>
    <h3>Login</h3>

    <form action=''>
      <table>
        <tr>
          <td class='label'>Username:</td>

          <td><input type='text' id="user" value='testuser'></td>
        </tr>

        <tr>
          <td class='label'>Password:</td>

          <td><input type='password' id="password" value='testpass'></td>
        </tr>
      </table><input type='submit' value='Login' id='loginBtn'>
    </form>

    <div class='success' style='display: none;'>
      Logged in successfully, page will be redirected automatically.
    </div>

    <div class='failed' style='display: none;'>
      Incorrect credentials.
    </div>
  </div>

  <div class='page' id='search'>
    <div>
      <form action=''>
        <fieldset>
          <h3><legend>Search</legend></h3><input type="text" name='search_term'> <input type='submit' value='Search'> <input type='button' name='reset' value='Reset'><br>
          <input type='radio' name='search_type' value='ind' checked='true'> <label>Individuals</label> <input type='radio' name='search_type' value='org'> <label>Groups</label>
        </fieldset>
      </form>
    </div>

    <div id='search_result'>
      <div>
        <h3>Search Result</h3>

        <div class='content'>
          <table class='results' style='width: 100%;'>
            <tbody>
              <tr style='text-align: left'>
                <th>Index</th>

                <th>Name</th>

                <th>Organization</th>

                <th>Address</th>

                <th>Phone</th>
              </tr>
            </tbody>
          </table>
          <hr>
        </div><input type='button' name='view_donor' value='Choose Highlighted Donor'> <input type='button' name='add_donor' value='Add Donor' class='change_page'>
      </div>
    </div>
  </div>

  <div class='page' id='add_donor'>
    <h3>Add Donor</h3>

    <div id='tpl_donor_ind' class='tpld'>
      <div class="content"></div>

      <div class="tpl addDonor" style='display: none;'>
        <form action=''>
          <table>
            <tr class='org'>
              <td><label>Organization Name</label></td>

              <td><input type="text" name="org_name"></td>
            </tr>

            <tr class="ind">
              <td><label>First Name</label></td>

              <td><input type="text" name="first_name"></td>
            </tr>

            <tr class="ind">
              <td><label>Last Name</label></td>

              <td><input type="text" name="last_name"></td>
            </tr>

            <tr>
              <td><label>Address</label></td>

              <td><input type="text" name="street_address"></td>
            </tr>

            <tr>
              <td><label>Province</label></td>

              <td><input type="text" name="province" value="BC"> <select class="Province">
                <option selected>
                  BC
                </option>

                <option>
                  AB
                </option>

                <option>
                  SK
                </option>

                <option>
                  MB
                </option>

                <option>
                  ON
                </option>

                <option>
                  QC
                </option>

                <option>
                  NB
                </option>

                <option>
                  NL
                </option>

                <option>
                  NS
                </option>

                <option>
                  PE
                </option>

                <option>
                  YT
                </option>

                <option>
                  NT
                </option>

                <option>
                  NU
                </option>
              </select></td>
            </tr>

            <tr>
              <td><label>City</label></td>

              <td><input type="text" name="city" value="Vancouver"> <select class="City metrovancouver">
                <option selected>
                  Vancouver
                </option>

                <option>
                  Abbottsford
                </option>

                <option>
                  Anmore
                </option>

                <option>
                  Belcarra
                </option>

                <option>
                  Burnaby
                </option>

                <option>
                  Chilliwack
                </option>

                <option>
                  Coquitlam
                </option>

                <option>
                  Delta
                </option>

                <option>
                  Hope
                </option>

                <option>
                  Kent
                </option>

                <option>
                  Langley
                </option>

                <option>
                  Maple Ridge
                </option>

                <option>
                  Mission
                </option>

                <option>
                  New Westminster
                </option>

                <option>
                  North Vancouver
                </option>

                <option>
                  Pitt Meadows
                </option>

                <option>
                  Port Coquitlam
                </option>

                <option>
                  Port Moody
                </option>

                <option>
                  Richmond
                </option>

                <option>
                  Squamish
                </option>

                <option>
                  Surrey
                </option>

                <option>
                  West Vancouver
                </option>

                <option>
                  White Rock
                </option>

                <option>
                  Whistler
                </option>
              </select></td>
            </tr>

            <tr>
              <td><label>Postal Code</label></td>

              <td><input type="text" name="postal_code"></td>
            </tr>

            <tr class="ind">
              <td><label>Phone Home</label></td>

              <td><input type="text" name="tel_home"></td>
            </tr>

            <tr>
              <td><label>Phone Work</label></td>

              <td><input type="text" name="tel_work"></td>
            </tr>

            <tr>
              <td><label>Phone Fax</label></td>

              <td><input type="text" name="tel_fax"></td>
            </tr>

            <tr class='org'>
              <td><label>Contact First Name</label></td>

              <td><input type="text" name="first_name"></td>
            </tr>

            <tr class='org'>
              <td><label>Contact Last Name</label></td>

              <td><input type="text" name="last_name"></td>
            </tr>

            <tr class='org'>
              <td><label>Contact Phone</label></td>

              <td><input type="text" name="tel_contact"></td>
            </tr>

            <tr>
              <td><input type='hidden' name='type' value='donor'> <input class='org' type='hidden' name='org' value='true'> <input type="submit" class='change_page'> <input type='button' name='empty' value='Empty'></td>
            </tr>
          </table>
        </form>
      </div>
    </div>
  </div>

  <div class='page' id='donor_detail'>
    <div id='detail'>
      <h3>Donor Detail</h3>

      <div class='content'></div>

      <div class='tpl'>
        <table>
          <tr class="org">
            <td><label>Organization Name</label>:</td>

            <td class='editable' name='org_name'><%= org_name %></td>
          </tr>

          <tr class="ind">
            <td><label>First Name</label>:</td>

            <td class='editable' name='first_name'><%= first_name %></td>
          </tr>

          <tr class="ind">
            <td><label>Last Name</label> :</td>

            <td class='editable' name='last_name'><%= last_name %></td>
          </tr>

          <tr>
            <td><label>Address</label> :</td>

            <td class='editable' name='street_address'><%= street_address %></td>
          </tr>

          <tr>
            <td><label>Province</label> :</td>

            <td class='editable' name='province'><%= province %></td>
          </tr>

          <tr>
            <td><label>City</label> :</td>

            <td class='editable' name='city'><%= city %></td>
          </tr>

          <tr>
            <td><label>Postal Code</label> :</td>

            <td class='editable' name='postal_code'><%= postal_code %></td>
          </tr>

          <tr class="ind">
            <td><label>Phone Home</label> :</td>

            <td class='editable' name='tel_home'><%= tel_home %></td>
          </tr>

          <tr class="org">
            <td><label>Phone Contact</label> :</td>

            <td class='editable' name='tel_contact'><%= tel_contact %></td>
          </tr>

          <tr>
            <td><label>Phone Work</label> :</td>

            <td class='editable' name='tel_work'><%= tel_work %></td>
          </tr>

          <tr>
            <td><label>Phone Fax</label> :</td>

            <td class='editable' name='tel_fax'><%= tel_fax %></td>
          </tr>

          <tr class="org">
            <td><label>Contact First Name</label>:</td>

            <td class='editable' name='first_name'><%= first_name %></td>
          </tr>

          <tr class="org">
            <td><label>Contact Last Name</label> :</td>

            <td class='editable' name='last_name'><%= last_name %></td>
          </tr>
        </table>
      </div>
    </div>

    <div id='donation_history'>
      <h3>Donation History</h3>

      <div class='records content'></div>
      <hr>

      <div id='donation_buttons' style='margin-top: 10px;'>
        <input type='button' name='add_donation' value='Add Donation' class='change_page'> <!--
                                                <input type='button' class="ind add" id='non-member' value='$14 and less'>
                                                <input type='button' class="ind add" id='low-income' value='$15 - $24'>
                                                <input type='button' class="ind add" id='personal' value='$25 - $39'>
                                                <input type='button' class="ind add" id='family' value='$40 and up'>
                                                <input type='button' class="org add" id='organization' value='Add Donation'>
                                                -->
      </div>
    </div>
  </div>

  <div class='page' id='add_donation'>
    <h3>Add Donation</h3>

    <form action=''>
      <table>
        <tbody>
          <tr>
            <td><b>Donation Date:</b></td>

            <td><input type='text' name='donation_date'> <input type='button' name='refresh' value='Refesh'> <input type='hidden' name='type' value='donation'> <input type='hidden' name='donor_id'> <input type='hidden' class='field ind all' name='donation_type' value='Donation'></td>
          </tr>

          <tr>
            <td><b>Donation Amount:</b></td>

            <td><input type='text' name='donation_amount'></td>
          </tr>

          <tr class='field org'>
            <td><b>Donation Type:</b></td>

            <td><input type='text' name='donation_type' value='Donation'></td>
          </tr>

          <tr>
            <td><b>Login ID 1:</b></td>

            <td><input type='text' name='login_id1'></td>
          </tr>

          <tr class='field ind family'>
            <td><b>Login ID 2:</b></td>

            <td><input type='text' name='login_id2'></td>
          </tr>

          <tr class='field ind family'>
            <td><b>Login ID 3:</b></td>

            <td><input type='text' name='login_id3'></td>
          </tr>

          <tr class='field ind family'>
            <td><b>Login ID 4:</b></td>

            <td><input type='text' name='login_id4'></td>
          </tr>

          <tr>
            <td><b>Method:</b></td>

            <td><input type='checkbox' name='cash' value='true'> Cash</td>
          </tr>

          <tr>
            <td><b>Comments:</b></td>

            <td>
            <textarea style='height: 40px;' name='comment'>
</textarea></td>
          </tr>
        </tbody>
      </table>
      <hr>
      <input type='button' name='submit' value='Submit' class='change_page'> <input type='button' name='reset' value='Reset'> <input type='button' name='cancel' value='Cancel'>
    </form>
  </div>

  <div class='page' id='donation_detail'>
    <h3>Donation Detail</h3>

    <div class="content"></div>

    <div class="tpl">
      <table>
        <tbody>
          <tr>
            <td><label>Donation Date:</label></td>

            <td><%= donation_date %></td>
          </tr>

          <tr>
            <td><label>Donation Amount:</label></td>

            <td><%= donation_amount %></td>
          </tr>

          <tr>
            <td><label>Donation Type:</label></td>

            <td><%= donation_type %></td>
          </tr>

          <tr>
            <td><label>Cash:</label></td>

            <td><%= cash_yn %></td>
          </tr>

          <tr>
            <td><label>Login ID 1:</label></td>

            <td><%= login_id1 %></td>
          </tr>

          <tr>
            <td><label>Login ID 2:</label></td>

            <td><%= login_id2 %></td>
          </tr>

          <tr>
            <td><label>Login ID 3:</label></td>

            <td><%= login_id3 %></td>
          </tr>

          <tr>
            <td><label>Login ID 4:</label></td>

            <td><%= login_id4 %></td>
          </tr>

          <tr>
            <td><label>Comment:</label></td>

            <td><%= comment %></td>
          </tr>
        </tbody>
      </table>
    </div>
    <hr>
    <input type="button" name='view_receipt' value='View Receipt'> <input type="button" name='back_to_donor' value='Back to Donor Details' class='change_page'>
  </div>

  <div class='page' id='view_receipt'>
    <div class='content'></div>

    <div class='tpl'>
      <div>
        <div style='float: right; display: table;'>
          Receipt printed on <%= _now %>
        </div>

        <div>
          <h3>Vancouver Community Network Association</h3>
        </div>
      </div>

      <div style='display: table; position: relative; left: 50px;'>
        #250-111 West Hastings Street<br>
        Vancouver, BC<br>
        V6B 1H4<br>
        778 724 0826
      </div>

      <p><b>* This receipt is NOT for tax deduction or credit purposes. *</b></p>
      <hr>

      <table class='receipt'>
        <tbody>
          <tr>
            <td class='label front'>Received:</td>

            <td colspan='3'><%= received %></td>
          </tr>

          <tr>
            <td class='label front'>From:</td>

            <td colspan='3'><%= street_address %></td>
          </tr>

          <tr>
            <td></td>

            <td colspan='3'><%= city %><%= province %></td>
          </tr>

          <tr>
            <td></td>

            <td colspan='3'><%= postal_code %></td>
          </tr>

          <tr>
            <td class='label front'>For:</td>

            <td><%= donation_type %></td>

            <td class='label' style='width: 1px;'>Amount:</td>

            <td>$ <%= donation_amount %>.00</td>
          </tr>
        </tbody>
      </table>
      <hr>
      Payment received on <%= donation_date %>
    </div>
  </div>

  <div class='page' id='test'>
    <ol id='results'></ol><input type="button" name='test' value='Test' class='change_page'>

    <div id='content_place'></div>

    <div class='tpl' id='tpl_place'>
      <ul>
        <li>place: <%= city %></li>

        <li>verb : <%= country %></li>
      </ul>
    </div>
  </div>
</body>
</html>
